<template>
  <div class="page">
    <van-loading v-if="liveData.list.length === 0" size="18px" text-size="14px" class="all-center">
      加载中...
    </van-loading>
    <div v-for="item in liveData.list" :key="item.id" class="item-box" @click="toGameDetail(item)">
      <van-image class="img-bg" :src="item.image" fit="cover"></van-image>
      <div class="content">
        <div class="title">{{ item.name }}</div>
        <div class="des" v-html="item.content"></div>
        <div class="join-btn">进入</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import gameApi from '@/api/game'
import { GAME_TYPE } from '@/types/game.types.ts'
import { useGameStore } from '@/store/game'

import type { ListModel, GetBannerItemModel } from '@/types/game.types.ts'
const gameStore = useGameStore()
const liveData = reactive<ListModel<GetBannerItemModel>>({
  list: [],
  page: 1,
  totalCount: 0,
  loading: false,
  finished: false,
})

const init = async () => {
  const res = await gameApi.getBanner({ position: 'live_game_banner' })
  liveData.list = res.data
  setTimeout(() => {
    liveData.loading = false
    liveData.finished = true
  }, 2000)
}

const toGameDetail = (item: GetBannerItemModel) => {
  gameStore.toPlay({ id: item.id, type: GAME_TYPE.live })
}
init()
</script>

<style scoped lang="scss">
.page {
  margin-top: var(--u-large-vertical-spacing);

  .item-box {
    position: relative;
    box-sizing: border-box;
    border-radius: var(--u-default-rounded);
    overflow: hidden;
    margin-top: var(--u-default-vertical-spacing);
    height: 268px;

    .img-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    .content {
      position: relative;
      z-index: 1;
      margin-top: 68px;
      margin-left: 32px;
      box-sizing: border-box;
      .title {
        color: var(--u-module-text-color);
        font-family: 'PingFang SC';
        font-size: var(--u-navigation-text-size);
        font-weight: 500;
      }

      .des {
        color: var(--u-default-text-color);
        font-family: 'PingFang SC';
        font-size: var(--u-tips-text-size);
      }
      .join-btn {
        box-sizing: border-box;
        box-shadow: var(--u-default-shadow);
        display: flex;
        justify-content: center;
        align-items: center;
        width: 104px;
        height: 40px;
        padding: 10px;
        border-radius: var(--u-larger-rounded);
        background: var(--u-module-background-color);
        color: var(--u-primary-text-color);
        text-shadow: 0px 2.247px 8.99px rgba(0, 0, 0, 0.2);
        font-family: 'PingFang SC';
        font-size: var(--u-bottom-navigation-bar-text);
        font-weight: 500;
        margin-top: 48px;
      }
    }
  }
}
</style>
